<!-- 商品详情 -->
<template>
	<view class="detail-wrap ">
		<!-- 标题栏 -->
		<view class="nav-box">
			<view class="state-hack"></view>
			<view :style="{ height: navbarHeight + 'px' }">
				<view hover-class="back-hover" class="back-box u-m-x-30 u-flex u-row-center u-col-center" @tap="goBack">
					<view class="u-iconfont uicon-arrow-left" style="color: #fff;font-size: 28rpx;"></view>
				</view>
			</view>
		</view>

		<!-- 缺省页 -->
		<shopro-empty v-if="showEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods_null.png'" :tipText="showEmptyText" btnText="返回上一页" @click="$Router.back()"></shopro-empty>
		<view class="detail_box" v-else>
			<view class="detail-content">
				<!-- 轮播 -->
				<u-swiper v-if="goodsInfo.type=='images'":height="750" borderRadius="0" :list="goodsInfo.images" indicator-pos="bottomRight" mode="number" :interval="3000" @click="onGoodsSwiper"></u-swiper>
				<u-swiper v-if="goodsInfo.type=='image'":height="750" borderRadius="0" :list="[goodsInfo.image]" indicator-pos="bottomRight" mode="number" :interval="3000" @click="onGoodsSwiper"></u-swiper>
				<!-- 视频 -->
				<video v-if="goodsInfo.type=='video'" :src="goodsInfo.video" controls autoplay style="width:100%"></video>
				<!-- 价格卡片组 -->
				<view class="title-box u-p-20 u-skeleton-fillet">
					<view class="content-row">
						<view class="content-l">
							<view class="goods-title u-m-b-10 u-ellipsis-2">{{ goodsInfo.title }}</view>
							<view class="sub-title u-ellipsis-2">{{ goodsInfo.subtitle }}</view>
						</view>
						<view class="content-r" @tap="articleLikeOptions()">
							<image lazy-load v-if="goodsInfo.is_like==1" fade-show src="../../../static/images/icon_dz.png" mode="scaleToFill"></image>
							<image lazy-load v-else fade-show src="../../../static/images/icon_dz_no.png" mode="scaleToFill"></image>
							<view>{{ goodsInfo.likes }}</view>
						</view>
					</view>
					<div class="content-row" v-html="formatRichText(goodsInfo.content)"></div>
				</view>
			</view>
      <!-- 	分享组件 -->
			<shopro-share v-model="showShare" :posterInfo="goodsInfo" :posterType="'goods'"></shopro-share>
			<!-- 登录 -->
			<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		</view>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
import share from '@/shopro/share';
import shPriceCard from './../components/sh-price-card.vue';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
    shPriceCard
	},
	data() {
		return {
			// navbar
			backIconName: 'arrow-left',

			showSku: false, //是否显示规格弹窗
			currentSkuText: '', //选中规格
			detailType: '',
			showShare: false,
			buyType: 'sku',
			showEmpty: false,
			showEmptyText: '',
			showServe: false,
			goodsInfo: {},
			commentList: [], //商品评价列表
			commentNum: 0, //商品评价总数
			favorite: false,
			activityRules: {},
			currentSkuList: [],
			confirmGoodsInfo: {},
			swiperCurrent: 0, //轮播下标
			tabCurrent: 'tab0',
			tabList: [
				{
					id: 'tab0',
					title: '商品详情'
				},
				{
					id: 'tab1',
					title: '规格参数'
				},
				{
					id: 'tab2',
					title: '用户评价'
				}
			]
		};
	},
	// 是否登录
	computed: {
		...mapGetters(['isLogin', 'authType']),
		navbarHeight() {
			// #ifdef APP-PLUS || H5
			return 48;
			// #endif
			// #ifdef MP
			let height = systemInfo.platform == 'ios' ? 44 : 48;
			return height;
			// #endif
		}
	},
	async onLoad() {
		let that = this;
		this.backIconName = getCurrentPages().length > 1 ? 'arrow-left' : 'home-fill';
		// const type = this.$Route.query.id;
    const type = 31
		this.detailType = type;
		switch (type) {
			case 'score':
				await this.getScoreDetail();
				break;
			default:
				await this.getGoodsDetail();
		}
	},

	onUnload() {
		share.setShareInfo();
	},

	methods: {
		articleLikeOptions(){
			let that = this;
			that.$http('goods.articleLike', {article_id: that.$Route.query.id}).then(res => {
				if(res.code==1){
					that.getGoodsDetail()
				}else{
					this.$u.toast(res.msg||'系统异常');
				}
			})
		},
		// goBack
		// 微信直播商品跳转详情，需要用小程序原生接口才能返回。
		goBack() {
			let pageList = getCurrentPages();
			if (pageList.length > 1) {
				// #ifdef MP-WEIXIN
				wx.navigateBack();
				// #endif
				// #ifndef MP-WEIXIN
				uni.navigateBack();
				// #endif
			} else {
				uni.reLaunch({ url: '/pages/index/index' })
			}
		},

		// 轮播图预览
		onGoodsSwiper(e) {
			this.$tools.previewImage(this.goodsInfo.images, e);
		},
		getActivityRules(e) {
			if (e) {
				this.activityRules = JSON.parse(e);
			}
		},

		// 选项卡
		onTab(id) {
			this.tabCurrent = id;
		},
		// 积分详情
		getScoreDetail() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$http('goods.scoreDetail', {
					id: that.$Route.query.id
				}).then(res => {
					if (res.code === 1) {
						that.goodsInfo = res.data;
						resolve(res.data);
					}
					if (res.code == 0) {
						resolve(false);
						that.$u.toast(res.msg);
					}
				});
			});
		},
		// 商品详情
		getGoodsDetail() {
			let that = this;
			uni.showToast({
				title: '加载中',
				icon: 'none'
			});
			return new Promise((resolve, reject) => {
				that.$http(
					'goods.articleDetail',
					{
						id: that.$Route.query.id
					},
					'',
					false
				).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						that.showEmpty = false;
						that.goodsInfo = res.data;
						// that.goodsInfo.content=res.data.content.replaceAll(/<img/g,"<img style='width:100% !import;height:auto;'");
						// that.goodsInfo.content=res.data.content.replaceAll(/width:"400"/g,"");
						// console.log(that.goodsInfo.content)
						if (that.goodsInfo.activity_type) {
							that.activityRules.status = that.goodsInfo.activity.status_code;
						}
						share.setShareInfo({
							title: that.goodsInfo.title,
							desc: that.goodsInfo.subtitle,
							image: that.goodsInfo.image,
							params: {
								page: 2,
								pageId: that.$Route.query.id
							}
						});
						that.getCommentList();
						resolve(res.data);
					} else {
						resolve(false);
						// that.$u.toast(res.msg);
						that.showEmpty = true;
						that.showEmptyText = res.msg;
					}
				});
			});
		},
		// 商品评论
		getCommentList() {
			let that = this;
			that.$http('goods.commentList', {
				goods_id: that.goodsInfo.id,
				per_page: 3,
				type: 'all'
			}).then(res => {
				if (res.code === 1) {
					that.commentList = res.data.data;
					that.commentNum = res.data.total;
				}
			});
		},
		formatRichText(html) {
			// 富文本内容格式化
			return (
				html &&
				html
						.replace(/<img[^>]*>/gi, function (match, capture) {
								// 查找所有的 img 元素
								return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi, '') // 删除找到的所有 img 元素中的 style 属性
						})
						.replace(/\<img/gi, '<img style="width:100%;height:auto;"')
			) // 对 img 元素增加 style 属性，并设置宽度为 100%
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep img{
	width: 100%;
}
// 标题栏
.nav-box {
	position: fixed;
	width: 100%;
	min-height: 140rpx;
	z-index: 888;
	top: 0;
	.back-box {
		background-color: rgba(#000, 0.18);
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-top: 14rpx;
	}
	.back-hover {
		background-color: rgba(#fff, 0.18);
	}
	.state-hack {
		width: 100%;
		height: var(--status-bar-height);
		/* #ifdef H5 */
		height: 20rpx;
		/* #endif */
	}
}
// 拼团玩法
.groupon-play {
	background: #fff;
	line-height: 94rpx;
	.title {
		font-size: 28rpx;
		color: #999;
	}

	.description {
		font-size: 28rpx;
		width: 500rpx;
		margin-left: 30rpx;
	}
}

// 选项卡
.tab-box {
	height: 102rpx;
	background: #fff;
	border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
	margin-top: 10rpx;

	.tab-item {
		flex: 1;
		height: 100%;
		position: relative;
		font-size: 30rpx;
		font-weight: bold;

		.tab-line {
			width: 123rpx;
			height: 4rpx;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			background: transparent;
			position: absolute;
			z-index: 2;
		}

		.line-active {
			background: rgba(168, 112, 13, 1);
		}
	}
}

// 选项卡内容
.tab-detail {
	min-height: 300rpx;
	background: #fff;
	// 规格参数
	.goods-size {
		.table-box {
			width: 710rpx;
			margin: auto;
			background: rgba(255, 255, 255, 1);
			border: 1rpx solid rgba(223, 223, 223, 1);

			.t-tr {
				border-bottom: 1rpx solid rgba(223, 223, 223, 1);
				&:last-child {
					border-bottom: none;
				}

				.t-head {
					font-size: 26rpx;
					color: #999;
					flex: 1;
					padding: 15rpx 20rpx;
					height: 100%;
				}

				.t-detail {
					font-size: 26rpx;
					border-left: 1rpx solid rgba(223, 223, 223, 1);
					flex: 4;
					padding: 15rpx 20rpx;
					height: 100%;
				}
			}
		}
	}
	// 富文本
	.rich-box {
		/deep/ img {
			display: block;
		}
	}
	// 评论
	.goods-comment {
		.more-box {
			height: 100rpx;
			background: #fff;

			.more-btn {
				width: 200rpx;
				line-height: 60rpx;
				border: 1rpx solid rgba(213, 166, 90, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(168, 112, 13, 1);
				padding: 0;
				background: #fff;
			}
		}
	}
}

// 规格卡片
.sku-box {
	line-height: 82rpx;
	background: #fff;
	padding: 0 20rpx;
	margin: 10rpx 0;
	font-size: 28rpx;

	.title {
		color: #999;
		margin-right: 20rpx;
	}
}

// 标题卡片
.title-box {
	background-color: #fff;
	.goods-title {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 44rpx;
	}

	.sub-title {
		color: #a8700d;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 44rpx;
	}
}
::v-deep .content-row{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	rich-text{
		width: 100%;
		img{
			width: 100%;
			height: auto;
		}
	}
}
.content-l{
	width: calc(100% - 80px);
	word-break: break-all;
}
.content-r{
	width: 80px;
	display: flex;
	justify-content: flex-end;
	padding-right: 8px;
	align-items: center;
	image{
		width: 22px;
		height: 22px;
		margin-right: 8px;
	}
}
</style>
